<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box" style="border: 1px solid blue ;width:500px;text-align: center;margin: auto;">
        <h1>欢迎-登陆</h1>
        <h3>账号名:</h3>
        <input type="text" class="username">
        <h3>密码:</h3>
        <input class="password" type="text" style="margin-bottom: 20px"><br>
        <button style="color: blue">登陆</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        //点击事件
        document.querySelector('button').addEventListener('click', () => {
            //获取用户名和密码
            const username = document.querySelector('.username').value
            const password = document.querySelector('.password').value
            // console.log(username);
            //判断长度（用户名最少8位，字母数字组成；密码最少6位，数字组成）
            if (username.length < 8) {
                alert('用户名必须大于等于8位')
                return  //阻止代码继续执行
            }
            if (password.length < 8) {
                alert('密码必须大于等于8位')
                return  //阻止代码继续执行
            }
            //通过判断提交数据
            axios({
                url: 'http://hmajax.itheima.net/api/login',
                method: 'post',
                data: {
                    username,
                    password
                }
            }).then(result => {
                alert(result.data.message);
            }).catch(error => {
                alert(error.response.data.message)
            })
        })
    </script>
</body>

</html>